import { type PropsOf, Slot, component$ } from '@builder.io/qwik';
import { cn } from '../cn';

type CardProps = {
  class?: string | undefined;
};

const Card = component$<CardProps>((props) => {
  const classes = ['rounded-md bg-white text-base text-black border border-kq-300 block w-full'];
  if (props.class) {
    classes.push(props.class);
  }

  return (
    <div class={classes}>
      <Slot />
    </div>
  );
});

export default Card;

type CardTitleProps = PropsOf<'div'>;

export const CardTitle = component$<CardTitleProps>((props) => {
  return (
    <div {...props} class={cn('px-4 py-2 text-lg font-bold text-kq-800 bg-kq-200 border-b border-kq-300', props.class)}>
      <Slot />
    </div>
  );
});

type CardBodyProps = PropsOf<'div'>;

export const CardBody = component$<CardBodyProps>((props) => {
  return (
    <div {...props} class={cn('px-4 py-2', props.class)}>
      <Slot />
    </div>
  );
});
